<!--
 * 数字信息显示组件，类似于 Vue.js 3 的NumberInfo，在 Vue.js 2中是收费的
 * 调用方式：<NumberInfo total="12321" sub-total="17.1" status="up" />
 -->
<template>
    <div>
        <div>
            <span class="number-info-total" v-if="total1!=''">{{total1}}<span>{{unit1}}</span></span>
            <span class="number-info-total" v-if="total2!=''">{{total2}}<span>{{unit2}}</span></span>
        </div>
        <div>
            <span class="number-info-subTotal" v-if="subTotal1!=''">{{subTotal1}}<span>{{subSnit1}}</span></span>
            <span class="number-info-subTotal" v-if="subTotal2!=''">{{subTotal2}}<span>{{subSnit2}}</span></span>
            <span v-if="status=='down'" class="number-info-statusDown">
				<image class="ivu-icon" src="/static/up.png"></image>
            </span>
            <span v-if="status=='up'" class="number-info-statusUp">
				<image class="ivu-icon" src="/static/down.png"></image>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        total: { type: String },
        subTotal: { type: String },
        unit: { type: String },
        status: { type: String, default: "" }
    },
    data() {
        return {
            total1: '',
            unit1: '',
            total2: '',
            unit2: '',
            subTotal1: '',
            subSnit1: '',
            subTotal2: '',
            subSnit2: ''
        };
    },
    watch: {
        total: function(oldVal, newVal) {
            if (this.total.indexOf('小时') >= 0) {
                this.total1 = this.total.split('小时')[0];
                this.unit1 = '小时';
                if (this.total.split('小时')[1].indexOf('分钟') >= 0) {
                    this.total2 = this.total.split('小时')[1].split('分钟')[0];
                    this.unit2 = '分钟';
                }
            } else if (this.total.indexOf('分钟') >= 0) {
                this.total2 = this.total.split('分钟')[0];
                this.unit2 = '分钟';
            } else {
                this.total1 = this.total;
                this.unit1 = this.unit;
            }
        },
        subTotal: function(oldVal, newVal) {
            if (this.subTotal.indexOf('小时') >= 0) {
                this.subTotal1 = this.subTotal.split('小时')[0];
                this.subSnit1 = '小时';
                if (this.subTotal.split('小时')[1].indexOf('分钟') >= 0) {
                    this.subTotal2 = this.subTotal.split('小时')[1].split('分钟')[0];
                    this.subSnit2 = '分钟';
                }
            } else if (this.subTotal.indexOf('分钟') >= 0) {
                this.subTotal2 = this.subTotal.split('分钟')[0];
                this.subSnit2 = '分钟';
            } else {
                this.subTotal1 = this.subTotal;
                this.subSnit1 = this.unit;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.number-info-total {
    height: 32px;
    font-size: 28px;
    span {
        font-size: 17px;
        margin-left: 5px;
    }
}

.number-info-subTotal {
    height: 32px;
    font-size: 20px;
    color: #7d8387;
    vertical-align: middle;
    span {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
    }
}

.number-info-statusDown {
    color: #19be6b;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
}

.number-info-statusUp {
    color: #ed4014;
    font-size: 18px;
    vertical-align: middle;
    margin-right: -15px;
}
.ivu-icon {
	width: 25px;
	height: 25px;
    margin-bottom: -10px;
}
</style>